<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>哈尔滨师范大学</title>
</head>
<style>
    /* .hidden {
    display: none;
    }   */
    .gen-btn {
        width: 600px;
        height: 88px;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
        border-radius: 44px;
        background-color: #e34d4b;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        font-size: 30px;
        text-align: center;
        line-height: 88px;
    }
    .bg{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: -999;
    }
    .tu{
        margin-top: 5%;
        width: 80%;
        margin-bottom: 3%;
        margin-left: 10%;
        margin-right: 10%;
    }
    .text{
        float: left;
        width: 20%;
        margin-left: 4%;
        margin-bottom: 30px;
        margin-top: 15px;
        text-align: center;
    }
    .tubiao{
        width: 37px;
        margin-left: 15%;
        margin-right: 15%;
        height: 37px;
    }
    .bmcg{
        font-size: 50px;
        /* color: rgb(255, 255, 255); */
    }
    .db{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: -999;
    }

    .bgmini{
        background: rgb(226, 226, 226);
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
        border-radius: 10px;
    }
    .bb{
        text-align: center;
    }


    /*模态框主体样式*/
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    /*模态框公共样式*/
    .modal-content {
        background-color: #fefefe00;
        margin: 50px auto 0;
        padding: 20px;
        /* border: 1px solid #888; */
        /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
        animation: modal-show 0.3s;
        border-radius: 10px;
    }


    /* 正常大小 */
    .modal-normal {
        width: 80%;
    }

    /* 中等大小 */
    .modal-medium {
        width: 80%;
    }

    /* 迷你大小 */
    .modal-mini {
        width: 80%;
    }

    /* 隐藏 */
    .modal-hide {
        animation: modal-hide 0.3s;
    }

    /* 展示动画 */
    @keyframes modal-show {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 隐藏动画 */
    @keyframes modal-hide {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-50px);
        }
    }

    /*关闭按钮*/
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255,0,0,0);
    }

    /*关闭按钮的鼠标点击和经过样式*/
    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255,0,0,0);

    }
    .img_bg{
        width: 100%;
        border-radius: 7px;
    }
    .btn_re{
        text-align: center;
        display: block;
        text-decoration: none;
        font-size: larger;
        font-weight: 600;
        color: #ffffff;
        background: #d34949;
        border-radius: 20px;
        padding: 7px;
        margin: 10px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 分页设置
    function showHideDivs() {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");

        if (div1.style.display === "none") {
            div1.style.display = "block";
            div2.style.display = "none";
        } else {
            div1.style.display = "none";
            div2.style.display = "block";
        }
    }
    // 自动点击按钮
    $(document).ready(function() {
        $('#myButton').click();
    });
</script>
</head>
<body>

<div class="margin-sm radius-lg box" >
    <div>
        <image alt="" class="tu" src="成功.svg"></image>
    </div>
    <div class="cu-bar ">
        <div class="padding-lr padding-tb-sm text-red bgmini text-bold">
            <div style="text-indent: 2em;padding: 6px;">xxx老师,您已成功报名！感谢您参与本次评卷工作！</div>
        </div>
    </div>
</div>
<div class="box">

    <div class="text" >
        <div class="bb" >
            <image data-modal-action="open" data-modal-target="myModal" alt="" class="tubiao" src="img/ditu.png" mode=""/>
            <div><a type="button"  name="openModal">师大地图</a></div>
        </div>
    </div>
</div>
<!-- 弹窗内容 -->
<div id="myModal" class="modal">
    <div class="modal-content modal-normal">
        <span class="close">&times;</span>
        <img class="img_bg" alt="地图" src="img/地图.jpg">
        <a href="img/地图.jpg" class="btn_re" download="pic.png">保存到手机相册</a>
    </div>
</div>

<div class="text" >
    <div class="bb">
        <image data-modal-action="open" data-modal-target="myModal2" alt="" class="tubiao" src="img/通行证.png" mode=""/>
        <div><a type="button"  >通行证</a></div>
    </div>
</div>
<!-- 弹窗内容 -->
<div id="myModal2" class="modal">
    <div class="modal-content modal-normal">
        <span class="close">&times;</span>
        <a href="img/通行证.jpg" download="pic.png"><img class="img_bg" alt="地图" src="img/通行证.jpg"></a>
        <h3 style="text-align: center;background: #ffffff;
        height: 50px;line-height: 50px;border-radius: 7px;">车牌号：xxxx</h3>
    </div>
</div>

<div class="text" >
    <div class="bb">
        <image data-modal-action="open" data-modal-target="myModal5" alt="" class="tubiao" src="img/fenzu.png" mode=""/>
        <div><a type="button"  >所属分组</a></div>
    </div>
</div>
<!-- 弹窗内容 -->
<div id="myModal5" class="modal">
    <div class="modal-content modal-normal" style="background-color: #fefefe;border: 1px solid #888;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
        <span class="close">&times;</span>
        <p>这里是所属分组</p>
    </div>
</div>

<div class="text"  >
    <div class="bb">
        <image data-modal-action="open" data-modal-target="myModal6"  alt="" class="tubiao" src="img/jianzhu_sushe.png" mode=""/>
        <div><a type="button"  >宿舍</a></div>
    </div>
</div>
<!-- 弹窗内容 -->
<div id="myModal6" class="modal">
    <div class="modal-content modal-normal" style="background-color: #fefefe;border: 1px solid #888;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
        <span class="close">&times;</span>
        <p>这里是宿舍</p>
    </div>
</div>

<div class="text">
    <div class="bb">
        <image data-modal-action="open" data-modal-target="myModal7" alt="" class="tubiao" src="img/位置.png" mode=""/>
        <div><a type="button" >评卷地点</a></div>
    </div>
</div>
<!-- 弹窗内容 -->
<div id="myModal7" class="modal">
    <div class="modal-content modal-normal" style="background-color: #fefefe;border: 1px solid #888;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
        <span class="close">&times;</span>
        <p>这里是评卷地点</p>
    </div>
</div>


<div class="text"  >
    <div class="bb">
        <image  data-modal-action="open" data-modal-target="myModal8" alt="" class="tubiao" src="img/校园活动.png" mode=""/>

        <div><a type="button"  >校园活动</a></div>
    </div>
</div>
<!-- 弹窗内容 -->
<div id="myModal8" class="modal">
    <div class="modal-content modal-normal" style="background-color: #fefefe;border: 1px solid #888;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
        <span class="close">&times;</span>
        <p>这里是校园活动</p>
    </div>
</div>

<div class="text" >
    <div class="bb" >
        <image  data-modal-action="open" data-modal-target="myModal3" alt="" class="tubiao" src="img/aixin_1.png" mode=""/>
        <div><a type="button"  >致谢</a></div>
    </div>
</div>
<!-- 弹窗内容 -->
<div id="myModal3" class="modal">
    <div class="modal-content modal-normal">
        <span class="close">&times;</span>
        <a href="img/letter.svg" download="pic.png"><img class="img_bg" alt="地图" src="img/letter.svg"></a>
    </div>
</div>

<div class="text" >
    <div class="bb">
        <image  data-modal-action="open" data-modal-target="myModal4" alt="" class="tubiao" src="img/证书.png" mode=""/>
        <div><a type="button">证书</a></div>
    </div>
</div>
<!-- 弹窗内容 -->
<div id="myModal4" class="modal">
    <div class="modal-content modal-normal">
        <span class="close">&times;</span>
        <img class="img_bg" alt="地图" src="img/证1书.png">
        <a href="img/证1书.png" class="btn_re" download="pic.png">保存到手机相册</a>
    </div>
</div>

</div>




<script>
    // 获取触发模态框的自定义属性
    var modalButtons = document.querySelectorAll("[data-modal-action]");

    // 获取模态框主体
    var modals = document.querySelectorAll(".modal");

    // 监听模态框的按钮事件
    modalButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            var targetId = this.dataset.modalTarget;
            var targetModal = document.getElementById(targetId);

            if (targetModal) {
                var action = this.dataset.modalAction;

                if (action === "open") {
                    openModal(targetModal);
                } else if (action === "close") {
                    closeModal(targetModal);
                }
            }
        });
    });

    // 打开模态框
    function openModal(modal) {
        modal.style.display = "block";
        modal.querySelector(".modal-content").classList.remove("modal-hide");
    }

    // 关闭模态框
    function closeModal(modal) {
        modal.querySelector(".modal-content").classList.add("modal-hide");
        modal.querySelector(".modal-content").addEventListener("animationend", function () {
            modal.style.display = "none";
        }, { once: true });
    }

    // 监听模态框的关闭时事件
    modals.forEach(function(modal) {
        var closeButton = modal.querySelector(".close");
        if (closeButton) {
            closeButton.addEventListener("click", function() {
                var targetModal = this.closest(".modal");
                closeModal(targetModal);
            });
        }
    });

    // 当用户点击模态框外部时，关闭模态框
    window.onclick = function (event) {
        modals.forEach(function(modal) {
            if (event.target === modal) {
                closeModal(modal);
            }
        });
    };
</script>
</body>
</html>